<template>
	<el-dialog
		:class="fullscreen ? 'zh-dialog' : ''"
		v-model="dialogVisible"
		:append-to-body="theAppendToBody"
		:destroy-on-close="destroyOnClose"
		:draggable="draggable"
		@close="onCancel"
    :close-on-click-modal="closeOnClickModal"
		:fullscreen="fullscreen"
    @opened="opened"
	>
		<slot></slot>
		<template #footer>
			<slot name="footer">
				<span class="dialog-footer">
					<zh-button type="" plain :text="cancelButtonText" @click="onCancel"></zh-button>
					<zh-button buttonType="save" :url="url" icon="" :formRef="formRef" :text="confirmButtonText" @click="onConfirm"></zh-button>
				</span>
			</slot>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup name="zh-dialog">
//------------------接收传入参数(组件)-------------------
//查看更多属性和方法，请查看element-plus组件https://element-plus.gitee.io/zh-CN/component/dialog.html
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	//是否需要遮罩层
	modal: {
		type: Boolean,
		default: true,
	},
	//Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
	appendToBody: {
		type: Boolean,
		default: false,
	},
  //是否可以通过点击 modal 关闭 Dialog
  closeOnClickModal: {
		type: Boolean,
		default: false,
	},
	//当关闭 Dialog 时，销毁其中的元素
	destroyOnClose: {
		type: Boolean,
		default: true,
	},
	//为 Dialog 启用可拖拽功能
	draggable: {
		type: Boolean,
		default: true,
	},
	cancelButtonText: {
		type: String,
		default: '取消',
	},
	confirmButtonText: {
		type: String,
		default: '保存',
	},
	//url
	url: String,
	//表单组件
	formRef: Object,
	//是否全屏
	fullscreen: {
		type: Boolean,
		default: false,
	},
});
//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------
const dialogVisible = ref(props.modelValue);
const theAppendToBody = ref(props.appendToBody);
//定义调用父组件方法
const emit = defineEmits(['update:modelValue', 'cancel', 'confirm', 'opened']);
//------------------定义调用方法-------------------------
//取消按钮触发事件
const onCancel = (data) => {
	emit('cancel', data);
	dialogVisible.value = false;
};
//确认按钮触发事件
const onConfirm = (data) => {
	emit('confirm', data);
};
// Dialog 打开动画结束时的回调	
const opened = () => {
	emit('opened');
};
//监听
watch(
	() => props.modal,
	(value) => {
		//当设置 modal 属性为 false 时，请将 append-to-body 属性设置为 true，因为 Dialog 是通过 position: relative 来确定位置的。一旦移除了 modal 属性，Dialog 会基于当前的 DOM 元素来进行定位， 而不是基于 document.body，这会导致样式问题。
		if (!value) {
			theAppendToBody.value = true;
		} else {
			theAppendToBody.value = props.appendToBody;
		}
	},
	{
		deep: true,
	}
);
watch(
	() => props.modelValue,
	(value) => {
		dialogVisible.value = value;
	},
	{
		deep: true,
	}
);
watch(
	() => dialogVisible.value,
	(value) => {
		emit('update:modelValue', value);
	}
);
//------------------初始化------------------------------
onMounted(() => {});
//------------设置给父组件调用的数据/方法(组件)-----------
</script>
<style lang="scss">
.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
	padding: 0 20px 0 20px !important;
}
.zh-dialog {
	.el-dialog__body {
		max-height: calc(90vh - 43px) !important;
	}
}
</style>
